<template>
	<fui-nav-bar title="个人中心"></fui-nav-bar>
	<view class="large">
		<view class="userBtn" @click="goToLogin" v-if="userStore.phone === ''">立即登录</view>
		<!-- 已登录 -->
		<view class="loginned" v-else>{{ userStore.phone }},欢迎使用桌趣</view>
	</view>

	<fui-list-cell arrow v-for="(item, index) in tabList" :key="index" @click="handleItem(item)">
		<text>{{ item.text }}</text>
	</fui-list-cell>
</template>

<script>
import { reactive, toRefs, defineComponent, onMounted } from 'vue';
import { useUserStore } from '@/store/user/index.js';
export default defineComponent({
	setup() {
		const state = reactive({
			isLogin: false,
			userInfo: {},
			tabList: [
				{
					path: '/pages_mine/equip',
					text: '我的装备'
				},
				{
					path: '/pages_mine/daz',
					text: '我的搭子'
				},
				{
					path: '/pages_mine/desk',
					text: '我的桌子'
				},
				{
					path: '/pages_mine/record',
					text: '历史战绩'
				},
				{
					path: '/pages_mine/setting',
					text: '设置'
				}
			]
		});

		// 仓库数据
		const userStore = useUserStore();
		onMounted(async () => {
			console.log(uni.getStorageSync('phone'));
			const isLogin = await uni.getStorage({
				key: 'isLogin'
			});
			console.log(isLogin);
			const userInfo = await uni.getStorage({
				key: 'userInfo'
			});

			state.isLogin = isLogin;
			state.userInfo = userInfo;
		});
		const goToLogin = () => {
			uni.navigateTo({
				url: '/pages/login/index'
			});
		};
		const handleItem = (e) => {
			uni.navigateTo({
				url: e.path
			});
		};
		return {
			...toRefs(state),
			goToLogin,
			handleItem,
			userStore
		};
	}
});
</script>

<style scoped lang="scss">
.large {
	width: 100%;
	height: 360rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url('../../static/bg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	.userBtn {
	}
}
</style>
